import React, {Component} from 'react'
import {Input, List, message} from "antd";
import ManufacturerInfo from "../../../types/ManufacturerInfo";
import {listManufacturer, queryManufacturerInfoAmount, searchManufacturer} from "../../../requests/Manufacturer";
import ManufacturerItem from "../item/ManufacturerItem";
import {getRes} from "../../../configFile";


//props接口
interface IProps { }
interface IState {
    ManufacturerSource: Array<ManufacturerInfo>
    amount: number
    offset: number
    limit: number
    isSearch: boolean
}
const { Search } = Input;
export default class ManufacturershowList extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            ManufacturerSource: [],
            amount: 0,
            offset: 0,
            limit: 10,
            isSearch: false
        }
    }
    //获取厂商数据
    getManufacturer = async () => {
        try {
            const amountRes = getRes(await queryManufacturerInfoAmount())
            const res = getRes(await listManufacturer(this.state.offset, this.state.limit))
            if (amountRes.isSuccessful && res.isSuccessful) {
                this.setState({
                    ManufacturerSource: res.data,
                    amount: amountRes.data
                })
            } else {
                console.error(amountRes);
                console.error(res);
                message.error("搜索厂商失败")
            }
        }
        catch (error) {
            message.error(error.toString())
        }
    }

    async componentDidMount() {
        await this.getManufacturer()
    }

    onSearch: (values: string) => void = async values => {
        console.log(values)
        if(values===''){
            await this.getManufacturer();
        }else{
            try {
                const res = getRes(await searchManufacturer(values))
                if (!res.isSuccessful) {
                    message.error("查询失败" + res.message)
                }
                this.setState({ ManufacturerSource: res.data, amount: res.data.length, isSearch: true })
            } catch (err) {
                message.error(JSON.stringify(err))
            }
        }
    }

    render() {
        // @ts-ignore
        return (
            <div className='manufacturerList' >
                <Search placeholder="搜索" onSearch={values => this.onSearch(values)} allowClear={true} enterButton />
                <List
                    size="large"
                    pagination={{
                        onChange: this.state.isSearch ? undefined : (page, pageSize) => {
                            if (!!pageSize) {
                                this.setState({
                                    offset: (page - 1) * (pageSize),
                                    limit: (pageSize)
                                },()=>{
                                    this.getManufacturer()
                                })
                            }
                        },
                        defaultPageSize: this.state.limit,
                        total: this.state.amount,
                        showSizeChanger: false
                    }}
                    dataSource={this.state.ManufacturerSource}
                    renderItem={item => (
                        <ManufacturerItem manufacturer={item} />
                    )}
                />
            </div>
        )
    }
}
